<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>服务器发送事件</title>
</head>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>

<script>
    if(typeof(EventSource)!=="undefined")
    {
        var source=new EventSource("http://www.w3school.com.cn/example/html5/demo_sse.php");
        //接受服务器传过来的消息
        source.onmessage=function(event)
        {
            //服务器发送过来的消息在 event.data 中
            document.getElementById("result").innerHTML+=event.data + "<br />";
        };
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
    }
</script>

<h1>下面是服务器端应该写的代码</h1>
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。
现在，您可以开始发送事件流了。
<h3>PHP 代码 (demo_sse.php)：</h3>

<pre>&lt;?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?&gt;
</pre>

<h3>ASP 代码 (VB) (demo_sse.asp):</h3>

<pre>&lt;%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " &amp; now())
Response.Flush()
%&gt;
</pre>

<p>代码解释：</p>

<ul>
    <li>把报头 "Content-Type" 设置为 "text/event-stream"</li>
    <li>规定不对页面进行缓存</li>
    <li>输出发送日期（始终以 "data: " 开头）</li>
    <li>向网页刷新输出数据</li>
</ul>
<div style="border:red 2px solid;width: 300px;height: 280px" >
    <h2>EventSource 对象</h2>

    <p>在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：</p>

    <table border="1px" cellpadding="1px" cellspacing="0">
        <tbody><tr>
            <th>事件</th>
            <th>描述</th>
        </tr>

        <tr>
            <td>onopen</td>
            <td>当通往服务器的连接被打开</td>
        </tr>

        <tr>
            <td>onmessage</td>
            <td>当接收到消息</td>
        </tr>

        <tr>
            <td>onerror</td>
            <td>当错误发生</td>
        </tr>
        </tbody>
        </table>
    </div>

</body>
</html>